import { ref, computed } from 'vue';

/**
 * 多系列线性图表组合式函数
 * @param {Object} config - 图表配置选项
 * @param {string} config.title - 图表标题
 * @param {Array} config.series - 系列配置数组
 * @param {boolean} config.showLegend - 是否显示图例，默认为 true
 * @param {string} config.legendPosition - 图例位置，默认为 'bottom'
 * @param {Object} config.grid - 网格配置
 * @param {Object} config.tooltip - 提示框配置
 * @param {Object} config.xAxis - X轴配置
 * @param {Object} config.yAxis - Y轴配置
 * @returns {Object} 返回包含图表选项和更新方法的对象
 */
export function useMultiLineChart(config = {}) {
  // 默认配置
  const defaultConfig = {
    title: '多系列数据趋势',
    series: [],
    showLegend: true,
    legendPosition: 'bottom',
    grid: {
      left: '1%',
      right: '5%',
      bottom: '10%',
      containLabel: true,
    },
    tooltip: {
      trigger: 'axis',
    },
    xAxis: {
      type: 'category',
    },
    yAxis: {
      type: 'value',
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
        },
      },
    },
  };

  // 合并配置
  const mergedConfig = { ...defaultConfig, ...config };

  // 响应式数据
  const chartData = ref({
    x: [],
    series: [],
  });

  // 计算属性：图表选项
  const chartOptions = computed(() => {
    const options = {
      tooltip: mergedConfig.tooltip,
      grid: mergedConfig.grid,
      xAxis: {
        ...mergedConfig.xAxis,
        data: chartData.value.x,
      },
      yAxis: mergedConfig.yAxis,
      series: chartData.value.series.map((seriesData, index) => {
        const seriesConfig = mergedConfig.series[index] || {};
        return {
          name: seriesConfig.name || `系列${index + 1}`,
          type: 'line',
          data: seriesData,
          smooth: seriesConfig.smooth !== undefined ? seriesConfig.smooth : true,
          itemStyle: {
            color: seriesConfig.color || getDefaultColor(index),
          },
          lineStyle: {
            color: seriesConfig.color || getDefaultColor(index),
          },
          ...(seriesConfig.showArea && {
            areaStyle: {
              color: `rgba(${hexToRgb(seriesConfig.color || getDefaultColor(index))}, ${seriesConfig.areaOpacity || 0.1})`,
            },
          }),
        };
      }),
    };

    // 添加图例
    if (mergedConfig.showLegend && chartData.value.series.length > 0) {
      options.legend = {
        data: chartData.value.series.map((_, index) => {
          const seriesConfig = mergedConfig.series[index] || {};
          return seriesConfig.name || `系列${index + 1}`;
        }),
        [mergedConfig.legendPosition]: 0,
      };
    }

    return options;
  });

  /**
   * 更新图表数据
   * @param {Object} data - 图表数据
   * @param {Array} data.x - X轴数据
   * @param {Array} data.series - 系列数据数组
   */
  const updateData = (data) => {
    chartData.value = {
      x: data.x || [],
      series: data.series || [],
    };
  };

  /**
   * 获取默认颜色
   * @param {number} index - 系列索引
   * @returns {string} 颜色值
   */
  function getDefaultColor(index) {
    const colors = ['#4080FF', '#52c41a', '#faad14', '#f5222d', '#722ed1', '#13c2c2'];
    return colors[index % colors.length];
  }

  /**
   * 将十六进制颜色转换为RGB
   * @param {string} hex - 十六进制颜色值
   * @returns {string} RGB颜色值
   */
  function hexToRgb(hex) {
    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result
      ? `${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}`
      : '64, 158, 255';
  }

  return {
    chartOptions,
    chartData: readonly(chartData),
    updateData,
  };
}

